<template>
  <div class="free-list-page">
    <store-nav-bar class="nav-out top-bar" :opacity="1-opacityNum" v-show="1-opacityNum > 0">
      <template slot="left">
        <icon class="icon" name="back_arrow" @click.native="back()"></icon>
      </template>
    </store-nav-bar>
    <store-nav-bar class="nav-in top-bar" background="#FA9F92" :opacity="opacityNum" v-show="opacityNum  > 0">
      <template slot="left">
        <icon class="icon" name="back_arrow" @click.native="back()"></icon>
      </template>
      <template v-slot:title>
        <span>0元购</span>
      </template>
      <template slot="right">
        <span>&nbsp;</span>
      </template>
    </store-nav-bar>
    <van-list
      v-model="loading"
      :finished="finished"
      :immediate-check="false"
      finished-text=""
      @load="onLoad"
    >
      <div class="top-area">
       <img src="./imgs/top-bg.png" alt="">
      </div>
      <freeItem v-for="(item,index) in itemList" :item="item" :key="index" @click.native="toDetail(item)"></freeItem>
    </van-list>
  </div>
</template>
<script>
import Vue from "vue";
import { Toast, List } from "vant";
import freeItem from "./components/freeItem";
import storeNavBar from "@/components/store-nav-bar";

Vue.use(Toast).use(List);
export default {
  data() {
    return {
      itemList: [
      ],
      pageSize: 10,
      pageNum: 1,
      loading: true,
      finished: false,
      opacityNum: 0
    };
  },
  components: {
    freeItem,
    storeNavBar
  },
  mounted() {
    this.getFreeItemList()
    window.addEventListener('scroll', this.handleScroll, true)
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll, true)
  },
  methods: {
    back(){
      this.$router.go(-1)
    },
    getFreeItemList() {
      const params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize
      };
      this.$http
        .post("/home/selectZeroPurchaseLimitationList", params)
        .then(res => {
          this.itemList = this.itemList.concat(res.info);
          if (res.page >= res.totalpage) {
            this.finished = true;
            this.loading = false;
          } else {
            this.loading = false;
          }
        })
        .catch(error => {
          Toast(error.message);
        });
    },
    onLoad() {
      this.pageNum += 1;
      this.getFreeItemList();
    },
    toDetail(item) {
      this.$router.push({name:'goods',params:{id:item.id}})
    },
    handleScroll() {
      const scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop
      this.opacityNum = scrollTop / 66 > 1 ? 1 : scrollTop / 66
    },
  }
};
</script>
<style lang="scss" scoped>
  .free-list-page{
    min-height: 100vh;
    width: 100%;
    background: #FA9F92;
    padding-bottom: 40px;
    .top-bar{
      .icon{
        width: 22px;
        height: 22px;
      }
      /deep/.van-nav-bar__title{
        color: #FFF;
      }
    }
    .van-hairline--bottom::after {
      border-bottom-width: 0;
    }
    .top-area{
      img{
        width: 100%;
      }
    }
  }
</style>
